<template>
  <div class="c-pilotLamp" :class="{'c-pilotLamp-abnormal' : abnormal , 'c-pilotLamp-normal' : !abnormal }">
      <span class="c-lamp" :class="{'c-lamp-mini':size=='mini'}" @click="myClick"></span>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  export default defineComponent({
    name: 'pilotLamp',
    props: {
      abnormal: propTypes.bool.def(false),
      size: propTypes.string.def('normal')
    },
    emits: ['defClick'],
    setup(props) {
    },
    methods:{
      myClick(){
        console.log('click');
        this.$emit('defClick');
      }
    }
  })
</script>
<style>
.c-pilotLamp{
  display: inline-block;
  vertical-align:middle;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.c-lamp{
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 5px;
  border-radius: 50%;
}
.c-lamp-mini{
  width: 12px;
  height: 12px;
  margin: 3px;
}

.c-pilotLamp-normal .c-lamp{
  animation:normals 2s infinite;
}
.c-pilotLamp-abnormal .c-lamp{
  animation:abnormal 2s infinite;
}

@keyframes normals{
  0%{
    box-shadow: inset 0px 0px 3px 1px green;
  }
  50%{
    box-shadow: inset 0px 0px 6px 2px green;
  }
  100%{
    box-shadow: inset 0px 0px 3px 1px green;
  }
}
@keyframes abnormal{
  0%{
    box-shadow: inset 0px 0px 3px 1px red;
  }
  50%{
    box-shadow: inset 0px 0px 6px 2px red;
  }
  100%{
    box-shadow: inset 0px 0px 3px 1px red;
  }
}
</style>
